<template>
	<view :data-theme="theme" class="container">
		<view class="card">
			<view class="header-top" style="position: relative;">
				<view class="header_name">{{activeData.name}}</view>
				<view class="main_color" style="font-size: 30rpx;">
					{{activeData.status | statusFilter}}
					<!-- {{activeData.status}} -->
				</view>
			</view>
			<view class="border-item">
				<view class="header-top" @click="activeIsShow" style="margin-top: 20rpx;line-height: 100rpx;">
					<view style="font-size: 33rpx;font-weight: bold;">活动时间</view>
					<u-icon :name="showUpClassPopup?'arrow-up':'arrow-down'" size="14"></u-icon>
				</view>
				<view v-if="showUpClassPopup"
					style="color: #080808;line-height: 1.3;font-size: 30rpx;padding-bottom: 30rpx;">
					{{activeData.startDate}}-{{activeData.endDate}}
				</view>
			</view>
			<view>
				<view class="header-top" @click="infoIsShow" style="line-height: 90rpx;">
					<view style="font-size: 33rpx;font-weight: bold;">活动信息</view>
					<u-icon :name="showUpInfoPopup?'arrow-up':'arrow-down'" size="14"></u-icon>
				</view>
				<view v-if="showUpInfoPopup" style="color: #080808;font-size: 29rpx;padding-bottom: 30rpx;color: #000;">
					<view style="display: flex;margin: 15rpx 0;line-height: 40rpx;">
						<view style="flex: 1;color: #929292;letter-spacing: 4rpx;">
							活动时段
						</view>
						<!-- <view style="flex: 3;">
							{{activeData.registrationDeadline}}
						</view> -->
						<view class="title-c" style="display: flex;flex-direction: column;flex: 3;">
							<view style="margin: 4rpx 0;" v-for="(ele,indexn) in activeData.timeList" :key="indexn">
								{{ele}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view>
				<view class="header-top" @click="requireIsShow"
					style="display: flex;justify-content: space-between;line-height: 90rpx;">
					<view style="font-size: 33rpx;font-weight: bold;">报名要求</view>
					<u-icon :name="showUpRequirePopup?'arrow-up':'arrow-down'" size="14"></u-icon>
				</view>
				<view v-if="showUpRequirePopup"
					style="color: #080808;font-size: 29rpx;padding-bottom: 30rpx;color: #000;">
					<view style="display: flex;margin: 15rpx 0;line-height: 40rpx;">
						<view style="flex: 1;color: #929292;letter-spacing: 4rpx;">
							活动要求
						</view>
						<view style="flex: 3;">
							{{activeData.activityRequirement}}
						</view>
					</view>
				</view>
			</view> -->
		</view>

		<view class="card">
			<view>
				<view class="header-top" style="display: flex;justify-content: space-between;line-height: 90rpx;">
					<view style="font-size: 33rpx;font-weight: bold;">活动商品</view>
				</view>
				<view class="content-text">
					<!-- <u-tabs :list="tabList" :scrollable="true" :lineWidth="30" :lineColor="bgColor" :current="tabIndex"
						:activeStyle="{ color: '#000'}" :inactiveStyle="{color:'#4c4d51'}"></u-tabs> -->
					<uni-segmented-control :current="currentInd" :values="tabValue" inActiveColor="#000"
						:style-type="styleType" @clickItem="tabChangeClick" :active-color="bgColor" />
					<view style="margin-top: 16rpx;">
						<swiper class="tab-view" :duration="600" :current.sync="tabIndex">
							<swiper-item class="swiper-item" v-for="(tab, index) in tabList" :key="index"
								style="display: flex;">
								<scroll-view class="scroll-view" scroll-y="true" :style="{ 'padding-bottom':'20rpx' }"
									style="overflow: hidden;">
									<active-prodect-page class="swiper-page" :currentInd="tabIndex" :bgColor="bgColor"
										ref="tab" :newDataList="propsData" :activityCategory="activityCategory"
										@toDetails="toDetails" @changeActive="changeActive"
										@deleteEnrolledPro="deleteEnrolledPro"
										@showInfoModalByIndex="showInfoModalByParam"
										@toModifySeckill="toModifySeckillPrt"
										@toPerfect="toPerfect"></active-prodect-page>
								</scroll-view>
							</swiper-item>
						</swiper>
					</view>
				</view>
				<view style="height: 110rpx;">

				</view>
			</view>
		</view>


		<view v-if="type == 1" class="footer"
			style="position: fixed;bottom: 0px;width: 100%;padding: 10px;background-color: #FFF;align-items: center;">
			<view style="flex: 1;">
				<button :color="bgColor" class="bg_color"
					style="font-weight: bold;border-radius: 10px;color: #FFF;padding: 20rpx;"
					@click="goAddProduct()">添加商品</button>
			</view>
		</view>

		<u-modal style="position: absolute;" :content="showInfoModalInfos[showInfoModalIndex]"
			:show="showInfoModalVision" showCancelButton buttonReverse @confirm="showInfoModalConfirm"
			@cancel="() => showInfoModalVision = false"></u-modal>
	</view>
</template>

<script>
	import {
		getSeckillInfoApi,
		deleteEnrolledProAPi,
		withdrawSeckillApi,
		upSkuProSeckillApi,
		downSkuProSeckillApi
	} from "@/api/marketing.js";
	// import detailProductPage from '../components/detail-product-page.vue';
	import activeProdectPage from '../components/active-prodect-page.vue';
	import {
		statusFilter,
		queryStatusFilter
	} from '../../components/filter.js';
	import {
		setThemeColor
	} from '@/utils/setTheme';
	let app = getApp();
	export default {
		components: {
			// 	detailProductPage
			activeProdectPage
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				loadMoreStatus: 'noMore', //加载更多
				activeData: {
					image: 'http://192.168.1.29:28080/img_xyt/public/product/2024/04/23/3669c2389d38458582e36ee84d6fe235o80gc46lgn.png',
					name: "冻品尝鲜价04.17-04.30",
					status: 1, //活动状态
					datailContent: "提报价格需低于招商指导价，相同商品取提报活动价低品优先展示，给出价格力度越高，提报成功率越高。",
					endTime: "2024.4.30 23:59:59",
					activeTime: "2024.4.17-2024.4.30",
					queryStatus: 1, //1直接生效
					activeCity: ' 嘉兴市,湖州,江门市,惠州市,成都,佛山,南区,芜湖市,深圳,广州,杭州,南京,绍兴,宁波马鞍山,合肥,无锡,上海,长沙,南宁,温州,常州,珠海,青岛,重庆,昆明,济南,贵阳,厦门,福州,北京,天津,东莞,武汉,郑州,苏一区,南昌,南通市,西安,台州市,泰州市,中山市,泉州市',
					requirements: '冻品尝鲜价专栏(冻肉、速食熟食、冷冻半成品、调理包)，限商品新客可享尝鲜价优惠价格，通过商城流量及首页固定栏目位高效转化新客!'
				},
				showUpClassPopup: false,
				tabValue: ['待完善', '待审核', '仓库中', '出售中', '未通过'],
				currentInd: 0,
				styleType: 'text',
				tabs: {},
				// -----------活动信息---------
				showUpInfoPopup: false,
				// -----------报名要求---------
				showUpRequirePopup: false,
				tabList: [{
					name: '待完善',
					type: 1,
				}, {
					name: '待审核',
					type: 2,
				}, {
					name: '仓库中',
					type: 3,
				}, , {
					name: '出售中',
					type: 4,
				}, {
					name: '未通过',
					type: 5,
				}],
				tabIndex: 0,
				//--------------------
				ongoingProductList: [], //活动中商品列表
				closedProductList: [], //
				activityCategory: 0, //活动类型
				id: '',
				propsData: [], //给子组件传的值
				newDataList: [], //组件列表
				/* ------弹窗----- */
				showInfoModalVision: false, //多功能确认事件
				showInfoModalIndex: 0,
				showInfoModalInfos: [
					"该商品正在出售中，是否确认进行编辑?",
					"确定将该物资撤回审核吗？",
					"是否修改上下架状态?"
				],
				selectedProdct: {},
			}
		},

		onLoad(options) {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			console.log(options)
			this.id = options.activityId;
			this.type = options.type;
			this.getRegistration(this.id);
		},
		// 过滤器
		filters: {
			statusFilter, // 活动状态
			queryStatusFilter
		},
		methods: {
			/* 
			获取活动详情 
			 */
			getRegistration(id) {
				let that = this;
				getSeckillInfoApi(id).then((res) => {
					console.log(res)
					this.activeData = res.data;
					// that.activityCategory = res.data.activityCategory;
					that.ongoingProductList = res.data.productList;
					// that.closedProductList = res.data.closedProductList;

					this.newDataValue();
					this.tabsChange();
				})
			},
			newDataValue() {
				const _this = this;
				this.ongoingProductList.map((item) => {
					item.attrValue.map((i) => {
						_this.$set(i, 'parentId', item.id);
						_this.$set(i, 'checked', false);
						_this.$set(i, 'sort', item.sort);
						_this.$set(i, 'name', item.name);
						_this.$set(i, 'categoryName', item.categoryName);
					});
				});
				let allSonVOLists = this.ongoingProductList.reduce((acc, current) => {
					return acc.concat(current.attrValue);
				}, []);
				this.newDataList = allSonVOLists;
			},
			activeIsShow() {
				this.showUpClassPopup = !this.showUpClassPopup;
			},
			tabChangeClick(e) {
				if (this.tabIndex !== e.currentIndex) {
					this.tabIndex = e.currentIndex
				};
				this.tabsChange();
			},
			tabsChange() {
				let that = this;
				let currentIndex = that.tabIndex;
				switch (currentIndex) {
					case 0: //待完善
						const status8Objects = this.newDataList.filter(item => item.status === 8);
						this.propsData = status8Objects;
						break;
					case 1: //待审核
						const status5Objects = this.newDataList.filter(item => item.status === 5);
						this.propsData = status5Objects;
						break;
					case 2: //仓库中
						const status2Objects = this.newDataList.filter(item => item.status === 2);
						this.propsData = status2Objects;
						break;
					case 3: //出售中
						const status1Objects = this.newDataList.filter(item => item.status === 1);
						this.propsData = status1Objects;
						break;
					case 4: //未通过
						const status6Objects = this.newDataList.filter(item => item.status === 6);
						this.propsData = status6Objects;
						break;

				}
			},

			//显示指定模态框
			showInfoModalByIndex(index) {
				this.showInfoModalIndex = index;
				this.showInfoModalVision = true;
			},
			showInfoModalByParam(param) {
				this.selectedProdct = param;
				this.showInfoModalByIndex(param.index);
			},
			//确认撤回 并 刷新页面
			showInfoModalConfirm() {
				let id = this.selectedProdct.id;
				let skuId = this.selectedProdct.skuId;
				let item = this.selectedProdct.item;
				let uniqueId = this.selectedProdct.uniqueId;
				let that = this;
				switch (this.showInfoModalIndex) {
					case 0: //下架后编辑商品
						// this.upOfDown(id, false, () => {
						that.moreSettingDrawer = false;
						that.getRegistration(this.id); //刷新商品
						that.toUpdate(id); //跳转页面
						// });
						break;
					case 1: //加入商品到回收站
						this.deleteProduct(id, () => {
							that.moreSettingDrawer = false;
							that.getRegistration(this.id); //刷新商品
						});
						break;
					case 2: //上下架设置
						this.upSkuProSeckill(item, () => {
							that.moreSettingDrawer = false;
							that.getRegistration(this.id); //刷新商品
						});
						break;
				}
				that.showInfoModalVision = false;
			},
			deleteProduct(id, successFun) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let seckillValue = {
					ids: ''
				};
				seckillValue.ids = id;
				withdrawSeckillApi(
					seckillValue
				).then(res => {
					if (res.code == 200) {
						if (successFun) {
							successFun();
						}
					} else {
						uni.$u.toast('操作失败');
					}
					uni.hideLoading();
				}).catch(err => {
					console.log("deleteProduct error", err);
					uni.hideLoading();
				});
			},
			/** 上架SKU商品 */
			upSkuProSeckill(item, successFun) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let status = item.status == 2 ? true : false;
				let updateSteValue = {
					ids: item.id,
				};
				status ? upSkuProSeckillApi(updateSteValue).then((res) => {
					uni.showToast({
						title: '上架成功',
						icon: 'success',
						duration: 1000 // 持续时间为 2 秒
					});
					if (res.code == 200) {
						if (successFun) {
							successFun();
						}
					} else {
						uni.$u.toast('操作失败');
						uni.hideLoading();
					}
					uni.hideLoading();
				}).catch((err) => {
					console.log('err:', err)
				}) : downSkuProSeckillApi(updateSteValue).then((res) => {
					uni.showToast({
						title: '下架成功',
						icon: 'success',
						duration: 1000 // 持续时间为 2 秒
					});
					if (res.code == 200) {
						if (successFun) {
							successFun();
						}
					} else {
						uni.$u.toast('操作失败');
						uni.hideLoading();
					}
					uni.hideLoading();
				}).catch((err) => {
					console.log('err:', err)
				})
			},


			/* 取消活动 */
			deleteEnrolledPro(item) {
				let enrolledActivityId = item.enrolledActivityId;
				deleteEnrolledProAPi(enrolledActivityId).then((res) => {
					this.getRegistration(this.id);
					return uni.showToast({
						title: '取消成功',
						icon: 'success',
						duration: 2000 // 持续时间为 2 秒
					});
				})
				// .catch((err) => {

				// })
			},
			/** 
			活动信息
			 */
			infoIsShow() {
				this.showUpInfoPopup = !this.showUpInfoPopup;
			},
			/** 
			报名要求
			 */
			requireIsShow() {
				this.showUpRequirePopup = !this.showUpRequirePopup;
			},
			/* 添加商品 */
			goAddProduct() {
				let id = this.id;
				this.goPage(`/pages/marketing/seckillDemo/seckillProChoose/seckillProChoose?activityId=${id}`);
			},
			toDetails(item) {
				let tabIndex = this.tabIndex;
				let activityId = this.activeData.id;
				let skuId = item.id;
				let activityCopey = this.activeData.activityCategory;
				this.goPage(`/pages/marketing/productDetail/productDetail?type=${tabIndex}`,
					(res) => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('productInfo', {
							activityId: activityId,
							skuId: skuId,
							type: activityCopey,
						})
					});
			},
			/** 去修改商品活动价格  */
			toModifySeckillPrt(item) {
				console.log(item)
				this.goPage(`/pages/marketing/seckillDemo/modifyEventPrice/modifyEventPrice`,
					(res) => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('productAttr', {
							data: item,
						})
					});
			},
			/** 去设置秒杀商品库存 */
			toPerfect(item) {
				this.goPage(`/pages/marketing/seckillDemo/setSeckillStock/index?data=` + JSON.stringify(item));
			},

			changeActive(item) {
				let activityId = this.activeData.id;
				let skuId = item.id;
				this.goPage(`/pages/marketing/modifyActive/modifyActive?activityId=${activityId}&skuId=${skuId}`);
			},
			goPage(url, success) {
				uni.navigateTo({
					url,
					success: success
				});
			},
		}
	}
</script>

<style lang="scss">
	// // #ifndef APP-PLUS */
	// page {
	// 	width: 100%;
	// 	min-height: 100%;
	// 	// display: flex;
	// }

	// /* #endif

	page {
		height: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.bg_color {
		@include main_bg_color(theme);
	}

	.main_color {
		@include main_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		// border: 1rpx solid $main-color-theme1;
		border: 1rpx solid;
	}

	.card {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.header-top {
		display: flex;
		justify-content: space-between;
	}

	.header_name {
		font-size: 31rpx;
		font-weight: bolder;
	}

	.border-item {
		border-bottom: 1px solid #f3f3f3;
	}

	.swiper-item {
		flex: 1;
		flex-direction: column;
	}

	.swiper-page {
		flex: 1;
		flex-direction: column;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.tab-view {
		display: flex;
		flex-direction: column;
		flex: 1;
		height: 820rpx;

		.scroll-view {
			height: 100%;
		}
	}
</style>